/** @format */

@use 'sass:math';
@use './var/grid' as VAR;

// Grid

.b-grid {
    display: grid;
    grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns: repeat(var(--bs-columns, 12), 1fr);

    [class*='b-col'] {
        position: relative;
    }
}

@mixin make-grid($i, $columns) {
    .b-grid {
        .b-col-#{$i} {
            grid-column: auto/span #{$i};
        }
        [class*='b-col'].offset-#{$i} {
            grid-column-start: $i;
        }
    }
}

@mixin make-grid-columns($columns) {
    @for $i from 1 through $columns {
        @if ($columns == 12) {
            @include make-grid($i, $columns);
        } @else {
            .b-row-#{$columns} > {
                @include make-grid($i, $columns);
            }
        }
    }
}

@include make-grid-columns(VAR.$grid-columns);

@for $counter from 1 through 10 {
    $gutter-num: (4 * $counter);
    $gutter: 1px * $gutter-num;

    .b-grid.gap-#{$gutter-num} {
        gap: $gutter;
    }
}
